<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Server Monitor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap-table.min.css"/>
</head>
<body>
<div class="container">

    <div style="text-align: center; margin-top: 10px;">
        <h3>服务器监控 / Server Monitor</h3>
    </div>
    <div class="row">
        <div class="btn-group col-lg-3 pull-right">
            <div class="input-group">
                <input type="number" class="form-control" value="5" min="1" data-toggle="tooltip" data-container="body" title="刷新数据的间隔时间，默认为5秒">
                <span class="input-group-addon" data-toggle="tooltip" data-container="body" title="时间单位">秒</span>
                <span class="input-group-btn">
                    <button class="btn btn-primary" data-toggle="tooltip" data-container="body"
                            title="重新设置间隔时间">重置</button>
                    <button onclick="loadEvent(this)" class="btn btn-danger running" data-toggle="tooltip"
                            data-container="body"
                            title="停止刷新数据">停止</button>
                </span>
            </div>
        </div>
    </div>
    <ul class="nav nav-tabs" style="font-size: 16px">
        <li class="nav-item active">
            <a class="nav-link" href="#dashboard" data-toggle="tab">仪表盘/Dashboard</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#server" data-toggle="tab">服务器/Server</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#jvm" data-toggle="tab">Java虚拟机/JVM</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#cpu" data-toggle="tab">处理器/CPU</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#memory" data-toggle="tab">内存/Memory</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#disk" data-toggle="tab">磁盘/Disk</a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="dashboard" class="tab-pane active">
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                CPU
                            </h3>
                        </div>
                        <div id="cpu_dashboard" style="height: 300px; width: 355px;"></div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                系统内存
                            </h3>
                        </div>
                        <div id="momery_dashboard" style="height: 300px; width: 355px;"></div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                Java虚拟机内存
                            </h3>
                        </div>
                        <div id="jvm_momery_dashboard" style="height: 300px; width: 355px;"></div>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                磁盘
                            </h3>
                        </div>
                        <table class="table table-hover" style="max-height: 320px;">
                            <tbody>
                            <tr>
                                <td>C</td>
                            </tr>
                            <tr>
                                <td>D</td>
                            </tr>
                            <tr>
                                <td>E</td>
                            </tr>
                            <tr>
                                <td>F</td>
                            </tr>
                            <tr>
                                <td>Z</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-md-10">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                磁盘读写速度
                            </h3>
                        </div>
                        <div id="diskrw" style="height: 320px; width: 940px;"></div>
                    </div>
                </div>
            </div>

        </div>
        <div id="server" class="tab-pane">
            <table class="table table-hover">
                <tbody>
                <tr>
                    <td width="15%">服务器名称</td>
                    <td id="serverName" width="30%"></td>
                    <td width="15%">操作系统</td>
                    <td id="serverOperatingSystem"></td>
                </tr>
                <tr>
                    <td>系统架构</td>
                    <td id="serverSystemArchitecture"></td>
                    <td>版本</td>
                    <td id="serverVersion"></td>
                </tr>
                <tr>
                    <td>处理器数</td>
                    <td id="serverAvailableProcessors"></td>
                    <td>系统负载平均值</td>
                    <td id="serverSystemLoadAverage"></td>
                </tr>
                <tr>
                    <td>服务器IP</td>
                    <td id="serverAddress" colspan="3"></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div id="jvm" class="tab-pane">
            <table class="table table-hover">
                <tbody>
                <tr>
                    <td width="15%">名称</td>
                    <td width="30%">Java HotSpot(TM) 64-Bit Server VM</td>
                    <td width="15%">供应商</td>
                    <td>Oracle Corporation</td>
                </tr>
                <tr>
                    <td>运行环境版本</td>
                    <td>1.8.0_19</td>
                    <td>实现版本</td>
                    <td>25.121-b13</td>
                </tr>
                <tr>
                    <td>安装目录</td>
                    <td colspan="3">C:\userSoft\Java\jdk1.8.0_91\bin</td>
                </tr>
                <tr>
                    <td>默认的临时文件路径</td>
                    <td colspan="3">C:\userSoft\Java\apache-tomcat-8.0.39\temp</td>
                </tr>
                <tr>
                    <td>扩展目录路径</td>
                    <td colspan="3">C:\userSoft\Java\jdk1.8.0_91\jre\lib\ext;C:\WINDOWS\Sun\Java\lib\ext</td>
                </tr>
                <tr>
                    <td>Java类路径</td>
                    <td colspan="3">
                        C:\userSoft\Java\apache-tomcat-8.0.39\bin\bootstrap.jar;C:\userSoft\Java\apache-tomcat-8.0.39\bin\tomcat-juli.jar
                    </td>
                </tr>
                <tr>
                    <td>启动时间</td>
                    <td>2018-09-18 09:23:50</td>
                    <td>运行时长</td>
                    <td>9时3分53秒</td>
                </tr>
                <tr>
                    <td>启动参数</td>
                    <td colspan="3">
                        -javaagent:C:\\userSoft\\Java\\IntelliJ IDEA
                        2017.2.1\\lib\\idea_rt.jar=60347:C:\\userSoft\\Java\\IntelliJ IDEA 2017.2.1\\bin
                        <br/>
                        -Dfile.encoding=UTF-8
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div id="cpu" class="tab-pane">
            <table id="cpuInfoTable" class="table table-hover" style="margin-top: 10px;"></table>
        </div>
        <div id="memory" class="tab-pane" style="margin-bottom: 20px;">
            <!--面板-->
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-4">
                    <div class="panel panel-primary">
                        <table id="serverMemoryInfoTable" class="table">
                            <tr style="background-color: #428bca">
                                <td colspan="2">物理内存</td>
                                <td colspan="2">交换区内存</td>
                            </tr>
                            <tr>
                                <td>总内存</td>
                                <td></td>
                                <td>总内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>剩余内存</td>
                                <td></td>
                                <td>剩余内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>已用内存</td>
                                <td></td>
                                <td>已用内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>使用率</td>
                                <td></td>
                                <td>使用率</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel panel-success">
                        <table id="jvmMemoryInfoTable" class="table">
                            <tr style="background-color: #dff0d8">
                                <td>Java虚拟机</td>
                                <td style="text-align: right">
                                    <button class="btn btn-sm btn-danger" data-toggle="tooltip" title="执行垃圾回收">回收/GC</button>
                                </td>
                            </tr>
                            <tr>
                                <td>总内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>剩余内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>已用内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>使用率</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="panel panel-info">
                        <table id="heapMemoryInfoTable" class="table">
                            <tr style="background-color: #d9edf7">
                                <td colspan="2">堆/heap</td>
                                <td colspan="2">非堆/nonheap</td>
                            </tr>
                            <tr>
                                <td>最大内存</td>
                                <td></td>
                                <td>最大内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>初始内存</td>
                                <td></td>
                                <td>初始内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>已用内存</td>
                                <td></td>
                                <td>已用内存</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>使用率</td>
                                <td></td>
                                <td>使用率</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </div>

            </div>
            <div style="font-size: 18px;">
                Java虚拟机内存详细使用情况
            </div>
            <!--表格-->
            <table id="heapMemoryPoolInfoTable" class="table table-hover"></table>

        </div>
        <div id="disk" class="tab-pane">
            <table id="diskInfoTable" class="table table-hover" style="margin-top: 10px;"></table>
        </div>
    </div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap-table.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
    $("[data-toggle='tooltip']").tooltip();

    function loadEvent(element) {
        if ($(element).hasClass("running")) {
            $(element).removeClass("running").removeClass("btn-danger").addClass("btn-success").html("启动");
            $(element).attr("title", "开始刷新数据").tooltip('fixTitle').tooltip('show');
        } else {
            $(element).addClass("running").removeClass("btn-success").addClass("btn-danger").html("停止");
            $(element).attr("title", "停止刷新数据").tooltip('fixTitle').tooltip('show');
        }
    }

    $(function () {
        initElement();
    })

    function initElement() {
        //--------------cpu---------------------
        $('#cpuInfoTable').bootstrapTable({
            columns: [{
                title: '#',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'vendor',
                title: '厂商'
            }, {
                field: 'model',
                title: '类别'
            }, {
                field: 'cacheSize',
                title: '缓存数量'
            }, {
                field: 'precUser',
                title: '用户使用率'
            }, {
                field: 'precSys',
                title: '系统使用率'
            }, {
                field: 'precWait',
                title: '当前等待率'
            }, {
                field: 'precNice',
                title: '当前错误率'
            }, {
                field: 'precIdle',
                title: '当前空闲率'
            }, {
                field: 'precCombined',
                title: '总的使用率'
            }],
            data: []
        });

        //--------------disk---------------------
        $('#diskInfoTable').bootstrapTable({
            columns: [{
                title: '#',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'dirName',
                title: '盘符路径'
            }, {
                field: 'sysTypeName',
                title: '文件系统'
            }, {
                field: 'typeName',
                title: '盘符类型'
            }, {
                field: 'total',
                title: '总大小'
            }, {
                field: 'avail',
                title: '可用大小'
            }, {
                field: 'used',
                title: '已用大小'
            }, {
                field: 'usedPercent',
                title: '已用百分比'
            }],
            data: []
        });

        //--------------heapMemoryPool---------------------
        $('#heapMemoryPoolInfoTable').bootstrapTable({
            columns: [{
                title: '#',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'name',
                title: '内存名称'
            }, {
                field: 'type',
                title: '内存类型'
            }, {
                field: 'managerNames',
                title: 'Manager Names'
            }, {
                field: 'usageMax',
                title: '最大内存'
            }, {
                field: 'usageInit',
                title: '初始内存'
            }, {
                field: 'usageUsed',
                title: '已用内存'
            }, {
                field: 'usageUsedPercent',
                title: '使用率'
            }],
            data: []
        });
    }

    function parseData(data) {
        serverInfo(data['server']);
        $('#cpuInfoTable').bootstrapTable('load', data['cpu'].list);
        serverMemoryInfo(data['serverMemory']);
        jvmMemoryInfo(data['jvmMemory']);
        jvmHeapMemoryInfo(data['heapMemory']);
        $('#heapMemoryPoolInfoTable').bootstrapTable('load', data['heapMemoryPool']);
        $('#diskInfoTable').bootstrapTable('load', data['disk']);
    }

    //服务器信息
    function serverInfo(data) {
        $("#serverName").html(data.hostName);
        $("#serverOperatingSystem").html(data.name);
        $("#serverSystemArchitecture").html(data.arch);
        $("#serverVersion").html(data.version);
        $("#serverAvailableProcessors").html(data.availableProcessors);
        $("#serverSystemLoadAverage").html(data.systemLoadAverage);
        $("#serverAddress").html(data.address);
    }

    function cpuDashboard() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('cpu_dashboard'));
        // 指定图表的配置项和数据
        var option = {
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            series: [{
                name: 'CPU',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: 45}]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(0) - 0;
            myChart.setOption(option, true);
        }, 1000);
    }

    function momeryDashboard() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('momery_dashboard'));
        // 指定图表的配置项和数据
        var option = {
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            series: [{
                name: 'Momery',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: 45}]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(0) - 0;
            myChart.setOption(option, true);
        }, 1000);
    }

    function jvmDashboard() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('jvm_momery_dashboard'));
        // 指定图表的配置项和数据
        var option = {
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            series: [{
                name: 'JVM',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: 45}]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(0) - 0;
            myChart.setOption(option, true);
        }, 1000);
    }

    cpuDashboard();
    momeryDashboard();
    jvmDashboard();

    function loadTwoLine() {
        var myChart = echarts.init(document.getElementById('diskrw'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            legend: {
                data: ['Read', 'Write']
            },
            toolbox: {
                show: true,
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function () {
                        var now = new Date();
                        var res = [];
                        var len = 0;
                        while (len < 10) {
                            res.unshift(now.toTimeString().replace(/\ G(.*)/, ''));
                            now = new Date(now - 1000);
                            len++
                        }
                        return res;
                    })()
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: 'M/s',
                    max: 100,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                },
                {
                    type: 'value',
                    scale: true,
                    name: 'M/s',
                    max: 100,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                }
            ],
            series: [
                {
                    name: 'Write',
                    type: 'line',
                    data: (function () {
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.push(Math.round(Math.random() * 100));
                        }
                        return res;
                    })()
                },
                {
                    name: 'Read',
                    type: 'line',
                    data: (function () {
                        var res = [];
                        var len = 0;
                        while (len < 10) {
                            res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                            len++;
                        }
                        return res;
                    })()
                }
            ]
        };
        myChart.setOption(option);

        setInterval(function () {
            axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

            var data0 = option.series[0].data;
            var data1 = option.series[1].data;
            data0.shift();
            data0.push(Math.round(Math.random() * 100));
            data1.shift();
            data1.push((Math.random() * 100 + 5).toFixed(2) - 0);

            option.xAxis[0].data.shift();
            option.xAxis[0].data.push(axisData);

            myChart.setOption(option);
        }, 1000);
    };
    loadTwoLine();

</script>
</body>
</html>